<template>
    <canvas ref="canvas" class="star-background"></canvas>
</template>

<script>
export default {
    name: 'StarBackground',
    data() {
        return {
            ctx: null,
            width: 0,
            height: 0,
            particles: [],
            numberOfParticles: 120,
            animationFrameId: null
        }
    },
    mounted() {
        this.initCanvas();
        this.createParticles();
        this.animate();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.animationFrameId) {
            cancelAnimationFrame(this.animationFrameId);
        }
    },
    methods: {
        initCanvas() {
            const canvas = this.$refs.canvas;
            this.ctx = canvas.getContext('2d');
            this.handleResize();
        },
        handleResize() {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            const canvas = this.$refs.canvas;
            canvas.width = this.width;
            canvas.height = this.height;
            this.createParticles();
        },
        createParticles() {
            this.particles = [];
            for (let i = 0; i < this.numberOfParticles; i++) {
                this.particles.push({
                    x: Math.random() * this.width,
                    y: Math.random() * this.height,
                    radius: Math.random() * 1.5,
                    vx: (Math.random() - 0.5) * 0.3,
                    vy: (Math.random() - 0.5) * 0.3,
                    connections: []
                });
            }
        },
        drawParticle(particle) {
            this.ctx.beginPath();
            this.ctx.beginPath();
            const gradient = this.ctx.createRadialGradient(
                particle.x, particle.y, 0,
                particle.x, particle.y, particle.radius * 10
            );
            gradient.addColorStop(0, 'rgba(79, 195, 247, 0.8)');
            gradient.addColorStop(1, 'rgba(79, 195, 247, 0)');
            this.ctx.fillStyle = gradient;
            this.ctx.arc(particle.x, particle.y, particle.radius * 2, 0, Math.PI * 2);
            this.ctx.fill();
        },
        drawConnections(particle) {
            particle.connections = [];
            this.particles.forEach(p2 => {
                if (p2 === particle) return;
                const distance = Math.sqrt(
                    Math.pow(particle.x - p2.x, 2) + Math.pow(particle.y - p2.y, 2)
                );
                if (distance < 100) {
                    particle.connections.push(p2);
                    this.ctx.beginPath();
                    this.ctx.moveTo(particle.x, particle.y);
                    this.ctx.lineTo(p2.x, p2.y);
                    this.ctx.strokeStyle = `rgba(79, 195, 247, ${0.8 * (1 - distance / 150)})`;
                    this.ctx.lineWidth = 0.3;
                    this.ctx.stroke();
                }
            });
        },
        animate() {
            this.ctx.fillStyle = 'rgba(18, 18, 38, 0.1)';
            this.ctx.fillRect(0, 0, this.width, this.height);

            this.particles.forEach(particle => {
                particle.x += particle.vx;
                particle.y += particle.vy;

                if (particle.x < 0 || particle.x > this.width) particle.vx *= -1;
                if (particle.y < 0 || particle.y > this.height) particle.vy *= -1;

                this.drawParticle(particle);
                this.drawConnections(particle);
            });

            this.animationFrameId = requestAnimationFrame(this.animate);
        }
    }
}
</script>

<style>
.star-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #12122666;
}
</style>